<template>
	<view class="set-city">
		<view class="layout-header">
			<view class="layout-header-left" @click.prevent.stop="blockCurrentEvent">
				<image src="@/static/icon/icon_home_search.png" />

				<input
					auto-blur
					hold-keyboard
					confirm-type="search"
					v-model.trim="searchValue"
					placeholder="请输入城市名称"
					@blur="changeIsFocus"
					@confirm="getSearchCity"
					placeholder-class="input-placeholder"
				/>

				<image v-show="isEmpty" @touchend.prevent.stop="emptySearch" src="@/static/icon/icon_search_delete.png" />
			</view>

			<!-- <view class="layout-header-right">
				<button @click="emptySearch">取消</button>
			</view> -->
		</view>
		<scroll-view @scroll="onScroll" scroll-y class="scroll-view" :scroll-into-view="scrollIntoId">
			<!-- 当前/已选站点 -->
			<view class="city-module">
				<view class="city-title">
					<view class="title">当前/已选站点</view>
				</view>

				<view class="city-list-row padding-15">
					<block v-for="(item, index) in historySite" :key="item.id">
						<view @click.stop="onConfirm(item)" class="city-item line-1 default">
							<image :src="activeIcon" v-if="!index" />
							<text>{{ item.city }}</text>
						</view>
					</block>
				</view>
			</view>

			<!-- 热门站点 -->
			<view v-if="cityData.hotSiteList && cityData.hotSiteList.length" class="city-module">
				<view class="city-title">
					<view class="title">热门站点</view>
				</view>
				<view class="city-list-row">
					<block v-for="(e, i) in cityData.hotSiteList" :key="i">
						<view @click.stop="onConfirm(e)" class="city-item line-1">
							{{ e.city }}
						</view>
					</block>
				</view>
			</view>

			<!-- 索引站点 -->
			<block v-for="(item, index) in cityData.allSiteList" :key="index">
				<view class="city-module" :id="item.word">
					<view class="city-title">
						<view class="title">{{ item.word }}</view>
					</view>

					<view class="city-list">
						<block v-for="(e, i) in item.siteList" :key="i">
							<view @click.stop="onConfirm(e)" class="city-item">
								<view class="line-1">{{ e.city }}</view>
							</view>
						</block>
					</view>
				</view>
			</block>
		</scroll-view>

		<!-- 索引首字母列表 -->
		<view @touchmove.stop.prevent class="alphabet-list">
			<block v-for="(e, i) in alphabetList" :key="i">
				<view
					@touchstart.stop.prevent="onTouchMove"
					@touchmove.stop.prevent="onTouchMove"
					@touchend.stop.prevent="onTouchStop"
					@touchcancel.stop.prevent="onTouchStop"
					class="alphabet-item"
				>
					{{ e }}
				</view>
			</block>
		</view>

		<!-- 点击提示 -->
		<view class="mask" v-if="showMask">
			<view class="mask-r">{{ selectLetter }}</view>
		</view>
	</view>
</template>

<script>
import { getDomeInfo } from '@/utils';
import { getLocationSearchList } from '@/api';
import { mapGetters, mapMutations } from 'vuex';

const activeIcon = Object.freeze(require('@/static/icon/icon_zd_position.png'));

export default {
	name: 'searchCity',

	data() {
		return {
			activeIcon,
			cityData: {},

			scrollTop: 0,
			touchmove: false,
			scrollToAnchorIndex: 0,
			scrollIntoId: '',
			showMask: false,

			selectLetter: '',
			searchValue: ''
		};
	},

	onLoad() {
		this.getBrowseSiteList();
	},

	beforeDestroy() {
		// #ifdef APP-PLUS
		this.currentWebview.setStyle({
			pullToRefresh: {
				support: true
			}
		});
		// #endif
	},

	computed: {
		...mapGetters(['currentSite', 'historySite']),

		alphabetList() {
			const { allSiteList = [] } = this.cityData;
			const alphabetList = [];

			allSiteList.map((item) => alphabetList.push(item.word));
			return alphabetList;
		},
		isEmpty() {
			const { searchValue } = this;

			return searchValue !== '';
		}
	},

	methods: {
		...mapMutations(['changeHistorySite', 'changeFeaturedWorks']),

		blockCurrentEvent() {
			return false;
		},
		changeIsFocus() {
			uni.hideKeyboard();
			// this.isFocus = false;
		},
		getSearchCity(params) {
			let value = params?.detail?.value ?? params;

			if (!value) {
				return;
			}

			this.searchValue = value;
			this.getBrowseSiteList(value);
		},
		emptySearch() {
			this.searchValue = '';
			this.getBrowseSiteList('');
			// this.currentPagetList = [];
			// this.isFocus = true;
		},
		async getBrowseSiteList(params) {
			const {
				currentSite: { id }
			} = this;

			const { code, data } = await getLocationSearchList({
				locationId: id,
				search: params || ''
			});

			if (code !== 200) {
				return;
			}

			this.cityData = data;
			this.init();
		},

		onConfirm(params) {
			this.changeHistorySite(params);

			uni.navigateBack();
			this.changeFeaturedWorks();
		},

		init() {
			this.$nextTick(() => {
				this.getAlphabetItemDom();
			});
		},

		// 点击选中
		scrollTo(letter = 'A') {
			this.showMask = true;
			this.selectLetter = letter;
			this.scrollIntoId = letter;
		},

		// scrollTop
		onScroll(e) {
			this.scrollTop = e.detail.scrollTop;
		},

		getAlphabetItemDom() {
			getDomeInfo.call(this, '.alphabet-item', false).then((rect) => {
				this.alphabetItem = {
					height: rect.height,
					top: rect.top
				};
			});
		},

		onTouchMove(event) {
			this.touchmove = true;
			const alphabetLength = this.alphabetList.length;
			const { height, top } = this.alphabetItem;
			const touch = event.touches[0];
			const clientY = touch.clientY || 0;
			let index = Math.floor((clientY - top) / height);
			if (index < 0) {
				index = 0;
			} else if (index > alphabetLength - 1) {
				index = alphabetLength - 1;
			}

			this.scrollIntoId = this.alphabetList[index];
			this.scrollToAnchorIndex = index;
			this.scrollTo(this.scrollIntoId);
		},

		onTouchStop() {
			this.touchmove = false;
			this.scrollToAnchorIndex = null;

			setTimeout(() => {
				this.showMask = false;
			}, 500);
		}
	}
};
</script>

<style lang="scss">
/** @format */

.set-city {
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
}
</style>

<style lang="scss" scoped>
/** @format */

.set-city {
	position: absolute;
	z-index: 999;
	background: #fff;
	width: 100%;
	height: 100%;
	flex: 1;
	.layout-header {
		position: fixed;
		// #ifndef H5
		top: 0;
		// #endif

		// #ifdef H5
		top: 45px;
		// #endif

		left: 0;
		right: 0;
		height: 112rpx;
		background: #fff;
		z-index: 999;
		padding: 20rpx 40rpx 0;

		display: flex;
		align-items: center;

		&-left {
			flex: 1;
			position: relative;

			input {
				height: 72rpx;
				color: #333;
				font-size: 28rpx;
				border-radius: 20rpx;
				background: #f6f6f6;
				padding: 0 76rpx;
			}

			/deep/ .input-placeholder {
				color: #999;
				font-size: 28rpx;
			}

			image {
				position: absolute;
				top: 50%;
				width: 36rpx;
				height: 36rpx;
				transform: translateY(-50%);

				&:nth-child(1) {
					left: 24rpx;
				}

				&:nth-child(3) {
					right: 18rpx;
				}
			}
		}

		&-right {
			width: 86rpx;

			button {
				padding: 0;
				text-align: right;

				color: #333;
				font-size: 28rpx;
				font-weight: bold;

				height: 44rpx;
				line-height: 44rpx;
				background: transparent;

				&::after {
					display: none;
				}
			}
		}
	}
	.scroll-view {
		position: relative;
		z-index: 1;
		height: calc(100% - var(--status-bar-height) - 140rpx);
		margin-top: 120rpx;
	}
}

.city-title,
.title {
	height: 70rpx;
}

.title {
	position: absolute;
	width: 100%;
	background: #fafafa;
	padding: 0 27rpx;
	display: flex;
	align-items: center;
	font-weight: 500;
	font-size: 13px;
}
.city-title {
	position: relative;
	.title {
		background: #fff;
		font-size: 28rpx;
	}
}
.city-list-row {
	margin-bottom: -20rpx;
	background: #fff;
	padding: 20rpx 60rpx 20rpx 27rpx;
	display: flex;
	flex-wrap: wrap;
	.city-item {
		margin-right: 5%;
		margin-bottom: 20rpx;
		width: 30%;
		height: 70rpx;
		border: solid 1px #eee;
		padding: 0 20rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #000;

		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 4rpx;
		}

		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}
	.checked,
	.item-hover {
		background-color: #f0fbff;
		border: solid 1px #000;
		color: #000;
	}
}

.padding-15 {
	padding-top: 15rpx;
}
.city-list {
	background: #fff;
	.city-item {
		position: relative;
		height: 100rpx;
		padding: 0 60rpx 0 27rpx;
		display: flex;
		align-items: center;
		font-size: 28upx;
		&::after {
			content: '';
			position: absolute;
			z-index: 1;
			bottom: 0;
			left: 27rpx;
			width: calc(100% - 27rpx);
			height: 1rpx;
			background: #ececec;
		}
		&:last-of-type::after {
			height: 0;
		}
	}
}
.alphabet-list {
	position: absolute;
	z-index: 99;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	.alphabet-item {
		padding-right: 10rpx;
		width: 50rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 20rpx;
		color: #000;
	}
	.alphabet-checked {
		background: #000;
		color: #fff;
	}
}

.mask {
	position: absolute;
	bottom: 0rpx;
	top: 83rpx;
	left: 0rpx;
	right: 0rpx;
	width: 750rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0);

	.mask-r {
		height: 120rpx;
		width: 120rpx;
		border-radius: 60rpx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #ffffff;
		z-index: 999;
	}
}
</style>
